<script setup>
import { applyJobApi, getJobListApi, isApplyJobApi } from '@/api/job'
import Form from '@/components/User/Form.vue'
import Pagization from '@/components/common/pagization.vue'
import Table from '@/components/Job/table.vue'
import { showStatusMessage } from '@/utils/common/showMessage'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import FormJob from '@/components/Job/form.vue'
import { dayFormat } from '@/utils/common/dayjs'

const router = useRouter()
const userStore = useUserStore()
// 表单数据
const formData = ref({
  enterpriseName: '',
  jobName: '',
  status: ''
})
const formModel = [
  {
    prop: 'enterpriseName',
    label: '企业名称',
    type: 'input'
  },
  {
    prop: 'jobName',
    label: '职位名称',
    type: 'input'
  }
]
const btnOpt = [
  {
    name: '查询',
    btnType: '',
    prop: 'query'
  },
  {
    name: '重置',
    btnType: 'info',
    prop: 'reset'
  }
]

const formRef = ref(null)
const pagizationToatl = ref(null)

/**
 * 获取表格数据
 */
async function getTableData(data) {
  const res = await getJobListApi({ ...data, status: 2, jobStatus: 0 })
  tableData.value = res.data.map((item) => {
    return {
      ...item,
      jobLocation: JSON.parse(item.jobLocation).join('')
    }
  })
  pagizationToatl.value = res.total
}
getTableData()
const pagizationRef = ref(null)
const selectFormRef = ref(null)
/**
 * 点击重置按钮
 */
function reset() {
  getTableData()
  pagizationRef.value.reset()
  selectFormRef.value.reset()
}

/**
 * 表单按钮点击事件
 * @param type 操作类型
 * @param data 表单数据
 */
function handleForm(type, data) {
  // console.log(type, data)
  switch (type) {
    case 'query':
      query(data)
      break
    case 'add':
      addForm()
      break
    case 'output':
      exportToExcel()
      break
    case 'reset':
      reset(data)
      break
    case 'import':
      handleUpload(data)
      break
    case 'submit':
      handleSubmit(data)
      break
    default:
      break
  }
}

/**
 * 表单查询事件
 * @param {Object} data 查询条件
 */
const queryData = ref(null)
async function query(data) {
  queryData.value = data
  const res = await getTableData(data)
  console.log(res)
  showStatusMessage(res)
  tableData.value = res.data
  pagizationToatl.value = res.total
}

// 列表数据
const tableData = ref([])
const columns = [
  {
    prop: 'enterpriseName',
    label: '企业名称',
    detail: true
  },
  {
    prop: 'jobName',
    label: '职位名称'
  },
  {
    prop: 'salary',
    label: '薪资'
  },
  {
    prop: 'jobName',
    label: '职位名称'
  },
  {
    prop: 'jobLocation',
    label: '地址'
  },
  {
    prop: 'jobDetailLocation',
    label: '详细地址'
  }
]
const options = [
  {
    label: '职位详情',
    type: 'warning',
    prop: 'detail'
  },
  {
    label: '申请职位',
    type: 'success',
    prop: 'apply'
  }
]

function handletTableEnterpriseName(data) {
  console.log(data.account)
  router.push({
    path: '/enterDetail',
    query: {
      account: data.account
    }
  })
}

/**
 * 表格的操作事件
 * @param {Object} data  操作行的数据
 * @param {String} type 操作类型-’edit’-‘delete’
 */
function handleTable(data, type) {
  switch (type) {
    case 'apply':
      handletTableApply(data)
      break
    case 'detail':
      handletTableDetail(data)
      break
    case 'enterpriseName':
      handletTableEnterpriseName(data)
      break
    default:
      break
  }
}
// 分页器条数发生变化
function handleSizeChange(val) {
  const data = selectFormRef.value.getValue()
  console.log('条数发生变化')
  getTableData({ size: val, ...data })
  pagizationRef.value.reset()
}
// 分页器页数发生变化
function handleCurrentChange(page, size) {
  const data = selectFormRef.value.getValue()
  console.log('页数发生变化')
  getTableData({ page, size, ...data })
}

// 控制抽屉显示
const dialog = ref(false)
// 抽屉数据
const dialogData = ref({})

function handletTableDetail(value) {
  router.push({
    path: '/weeklyJournalDetail',
    state: {
      data: JSON.stringify(value),
      type: 'jobDetail'
    }
  })
}

// 弹窗显示
const dialogTableVisible = ref(false)
const FormJobData = ref({
  enterpriseName: '',
  jobName: '',
  phone: '',
  applyTime: dayFormat(new Date()),
  // 简历
  resume: '',
  // 专业
  major: userStore.userInfo.major || '',
  name: userStore.userInfo.name || ''
})
const formJobOpt = [
  {
    prop: 'enterpriseName',
    label: '企业名称',
    type: 'input',
    disabled: true
  },
  {
    prop: 'jobName',
    label: '职位名称',
    type: 'input',
    disabled: true
  },
  {
    prop: 'name',
    label: '姓名',
    type: 'input',
    disabled: true
  },
  {
    prop: 'major',
    label: '专业',
    type: 'input',
    disabled: true
  },
  {
    prop: 'phone',
    label: '个人联系电话',
    type: 'input'
  },
  {
    prop: 'applyTime',
    label: '申请时间',
    type: 'input',
    disabled: true
  },
  {
    prop: 'resume',
    label: '上传简历',
    type: 'uploadResume'
  }
]
const btnJobOpt = [
  {
    name: '取消',
    btnType: 'info',
    prop: 'cancel'
  },
  {
    name: '提交',
    btnType: 'primary',
    prop: 'submit'
  }
]
const applyDataInfo = ref({
  // 企业账号
  exterpriseAccount: '',
  // 企业名称
  enterpriseName: '',
  // 职位名称
  jobName: '',
  // 学生账号
  studentAccount: '',
  // 学生姓名
  name: '',
  // 专业
  major: '',
  // 个人练习电话
  phone: '',
  // 申请时间
  applyTime: '',
  // 简历
  resume: '',
  jobId: '',
  salary: ''
})
// 详情
async function handletTableApply(data) {
  console.log(data)

  // 判断是否已经申请过职位
  const res = await isApplyJobApi({
    studentAccount: userStore.userInfo.account,
    jobName: data.jobName,
    exterpriseAccount: data.account
  })
  if (res.status == 1) {
    showStatusMessage(res)
    return
  }
  //申请面试
  dialogTableVisible.value = true
  applyDataInfo.value.exterpriseAccount = data.account
  applyDataInfo.value.jobId = data.id
  applyDataInfo.value.salary = data.salary
  FormJobData.value.jobName = data.jobName
  FormJobData.value.enterpriseName = data.enterpriseName
}
// 点击提交申请
async function handleSubmit(data) {
  applyDataInfo.value.studentAccount = userStore.userInfo.account
  applyDataInfo.value.enterpriseName = data.enterpriseName
  applyDataInfo.value.name = data.name
  applyDataInfo.value.phone = data.phone
  applyDataInfo.value.resume = data.resume
  applyDataInfo.value.applyTime = data.applyTime
  applyDataInfo.value.jobName = data.jobName
  applyDataInfo.value.major = data.major
  const res = await applyJobApi(applyDataInfo.value)
  showStatusMessage(res)
  dialogTableVisible.value = false
}
const formJobRef = ref(null)
//dialog关闭前的回调
function handleDialogClose() {
  formJobRef.value.reset()
}
function handleMapView() {
  router.push({
    path: '/map',
  
  })
}
</script>

<template>
  <div class="license-wrapper">
    <div class="user-content">
      <Form
        :data="formData"
        :formOpt="formModel"
        :btnOpt="btnOpt"
        @handleForm="handleForm"
        ref="selectFormRef"
      ></Form>
      <!-- 表格 -->
      <Table
        :tableData="tableData"
        :columns="columns"
        :options="options"
        @handleTable="handleTable"
      >
        <template #firstColumn>
          <el-table-column type="index" label="编号" width="100" align="center" />
        </template>
      </Table>
      <!-- 分页 -->
      <Pagization
        ref="pagizationRef"
        :total="pagizationToatl"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></Pagization>
      <!-- 抽屉 -->
      <el-drawer v-model="dialog" direction="rtl" class="demo-drawer">
        <template #header>
          <div class="drawer-title" style="font-weight: 900; font-size: 25px; letter-spacing: 15px">
            职位详情
          </div>
        </template>
        <div class="drawer-content">
          <div class="content-list"><span>公司名称：</span>{{ dialogData.enterpriseName }}</div>
          <div class="content-list"><span>岗位薪资：</span>{{ dialogData.salary }}</div>
          <div class="content-list"><span>职位名称：</span>{{ dialogData.jobName }}</div>
          <div class="content-list"><span>职位描述：</span>{{ dialogData.jobDesc }}</div>
          <div class="content-list"><span>任职要求：</span>{{ dialogData.jobRequire }}</div>
          <div class="content-list"><span>地址：</span>{{ dialogData.jobLocation }}</div>
          <div class="content-list"><span>详细地址：</span>{{ dialogData.jobDetailLocation }}</div>
          <div class="content-list"><span>联系电话：</span>{{ dialogData.phone }}</div>
        </div>
      </el-drawer>
      <!-- 申请职位 -->
      <el-dialog
        v-model="dialogTableVisible"
        title="申请面试，填写资料"
        width="800"
        @close="handleDialogClose"
      >
        <FormJob
          ref="formJobRef"
          :data="FormJobData"
          :form-opt="formJobOpt"
          :btn-opt="btnJobOpt"
          @handleForm="handleForm"
        >
        </FormJob>
      </el-dialog>
    </div>
    <div class="map-view" @click="handleMapView">地图查看</div>
  </div>
</template>

<style lang="scss" scoped>
.license-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  position: relative;

  .user-content {
    width: 100%;
    padding: 10px 50px;
    text-align: left;
    overflow: auto;

    .demo-drawer {
      .drawer-content {
        .content-list {
          margin-bottom: 28px;

          span {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .map-view {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #409EFF, #36D1DC);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

    &::before {
      content: '';
      display: block;
      width: 40px;
      height: 40px;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      margin-bottom: 8px;
    }
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4);
    }
    70% {
      box-shadow: 0 0 0 20px rgba(64, 160, 255, 0.062);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
    }
  }
}
</style>
